<template>
  <div>
    <a-row v-if="!isShowOverView" :gutter="[16, 16]">
      <a-col v-for="(d, index) in gDataSource" :key="index" :span="8">
        <a-card :title="d.name" :bordered="false">
          <p>
            <b>IP：</b>
            <span>{{ d.ip || "暂无" }}</span>
          </p>

          <p>
            <b>编号：</b>
            <span>{{ d.id || "暂无" }}</span>
          </p>

          <p>
            <b>创建时间：</b>
            <span>{{ d.createTime ? dateFormat(d.createTime) : "暂无" }}</span>
          </p>

          <p v-if="d.empty !== true" style="text-align: right">
            <a-button
              type="primary"
              icon="profile"
              size="small"
              @click="showOverView(d.id)"
            >
              进入数据跨层感知与智能分析
            </a-button>
          </p>
        </a-card>
      </a-col>
    </a-row>
    <div v-if="isShowOverView">
      <over-view :dataCenterId="dataCenterId" @hide-detail="hideOverView" />
    </div>
  </div>
</template>

<script>
import moment from "moment";
import OverView from "./modules/OverView";
import { GwListMixin } from "@/mixins/GwListMixin";
import { gPostAction } from "@/api/manage";

export default {
  name: "F0301",
  mixins: [GwListMixin],
  components: {
    OverView,
  },
  data() {
    return {
      isShowOverView: false,
      url: {
        list: "/asset/pageDatacenter",
      },
      dataCenterId: "",
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    hideOverView() {
      this.isShowOverView = false;
    },
    showOverView(id) {
      this.dataCenterId = id;
      this.isShowOverView = true;
    },
    loadData() {
      this.gQueryParam.pageSize = 99;
      this.gQueryParam.title = "多数据中心调度-数据跨层感知与智能分析";
      this.gQueryParam.content = "查看数据跨层感知与智能分析";
      gPostAction(this.url.list, this.gQueryParam).then((res) => {
        const data = res.data;
        this.gDataSource = data.list || [
          {
            name: "",
            id: "",
            ip: "",
            createTime: "",
            empty: true,
          },
        ];
      });
    },
    dateFormat(date) {
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    handleOverView(data) {},
  },
};
</script>
<style scoped>
</style>
